<template>
	<view class="fill-width-height" :class="$thatThemeClassName"> 
		<uv-cell-group 
			class="flex-1 flex-unset overflow-auto"
			ref="scrollContainer"
			@scroll="handleScroll"
			v-if="dataList.length > 0"
		 >
			<uv-grid :col="3" class="fill-width" >
				<uv-grid-item 
					v-for="(item,index) in dataList" 
					:key="index"
					:customStyle="{ padding: '6px' }"
				 >
					<uv-image 
						:mode="imageMode" 
						radius="10" 
						width="100%" 
						:height="imageHeight"
						:lazy-load="true"
						:observeLazyLoad="true"
						:showMenuByLongpress="false"
						:src="getPreviewPath(item)"
						@click="viewsDetails(item)">
						<template v-slot:loading>
							<uv-loading-icon color="#999"></uv-loading-icon>
						</template>
					</uv-image>
				</uv-grid-item>
			</uv-grid>
		</uv-cell-group>
		<view class="flex-1" v-else>
			<uv-empty 
				mode="search"
				con="https://cdn.uviewui.com/uview/empty/car.png"
			></uv-empty>
		</view>
	</view>
</template>

<script>
	import { getInfoListByParentId } from '@/api/home/index'
	import { getCollectDetailPage } from '@/api/collection/index'
	import { clearImageListCache,setImageListCache } from '@/hooks/common'
	export default {
		data() {
			return {
				formId: '',
				dataList: [],
				type: null,
				status: 'loadmore',
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 30,
				}
			}
		},
		computed: {
			isCollection(){
				return this.type == 'collection'
			},
			imageMode(){
				return this.$config.imgageMode || 'widthFix'
			},
			imageHeight(){
				if(this.$config?.pageGridListImgageHeight?.length > 0){
					return this.$config.pageGridListImgageHeight
				}
				if(this.$config.isCartoon){
					return 120;
				}
				return 240
			},
		},
		methods: {
			goToPage(url) {
				uni.navigateTo({
					url: url 
				});
			},
			viewsDetails(item) {
				clearImageListCache()
				const fileId = this.isCollection ? item.imginfoid : item.id
				const imageList = this.dataList?.map(dItem => this.isCollection ? dItem.imginfoid : dItem.id)
				setImageListCache(imageList)
				const encodedId = encodeURIComponent(fileId);
				this.goToPage('/pages/viewdetail/index?fileId=' + encodedId)
			},
			getPreviewPath(item){
				if(this.isCollection){
					return this.$getPreviewPath(item.imginfoid)
				} else {
					return this.$getPreviewPath(item.id)
				}
			},
			async fetchData(){
				if(this.isCollection){
					const params = {
						collid: this.formId,
						...this.queryParams
					}
					const res = await getCollectDetailPage(params)
					this.total = res.total
					this.dataList.push(...res.rows)
				} else {
					this.dataList = []
					const dataList = await getInfoListByParentId({id: this.formId}).then(res => res.data )
					this.dataList = dataList
				}
			},
			handleScroll(event) {
				const scrollContainer = this.$refs.scrollContainer;
				if (!scrollContainer) {
				  return
				}
				const { scrollTop, scrollHeight, clientHeight } = scrollContainer?.$el;
				// 当滚动到底部时触发查询
				const isBottom = scrollTop + clientHeight >= scrollHeight - 5
				const isFlag = this.status !== 'nomore' && this.queryParams.pageNum <= this.totalPages
				if (isBottom && isFlag) {
					this.queryParams.pageNum++;
					this.fetchData();
				}
			},
		},
		onLoad(options){
			this.type = options.type
			this.formId = options.id
			this.dataList = []
			this.fetchData()
		}
	}
</script>

<style>

</style>
